/*
 * MenuBar只负责生成<div>，不会实现功能。
 * MenuBar的add()方法：bar.add("menu1", "item1", "http://www.qdmmy6.com/");
 * MenuBar的menus属性是一个数组（其时它是一个Map），每个元素对应一个menu。
 * 数组中的元素还是一个数组，这个数组中的元素是MenuItem对象。
 * add()方法首先查找menus["menu1"]元素（即名为"menu1"的菜单）是否存在，
 * 如果存在，使用"item1"与"http://www.qdmmy6.com/"创建MenuItem对象。然后把MenuItem对象添加到menus["menu1"]中去。
 * 如果不存在，先创建menus["menu1"]，在把MenuItem添加进去。
 */
function Q6MenuBar(objName, barName) {
    this.obj = objName;
    this.barName = barName;
    this.config = {
        topHeight: null,
        bottomHeight: null,
        width: null,
        radioButton: true,
        imgDir: "img/"
    };
    this.icon = {jiaIcon: "jia.png", jianIcon: "jian.png"};
    this.colorStyle = 2;
    this.colors = [];
    this.colors[0] = {
        menuBgColor: "rgb(246,133,1)",
        menuBorderColor: "rgb(236,171,87)",
        itemBgColor: "rgb(38,38,38)",
        itemBorderColor: "rgb(100,100,100)",
        itemBgMoveColor: "rgb(32,145,177)",
        itemBorderMoveColor: "rgb(119,171,113)",
        itemMoveColor: "rgb(255,255,255)",
        itemColor: "rgb(255,255,255)",
        menuBarColor: "rgb(255,255,255)",
        menuContentColor: "rgb(255,255,255)"
    };
    this.colors[2] = {
        itemBgMoveColor: "rgb(246,133,1)",
        itemBorderMoveColor: "rgb(236,171,87)",
        menuBgColor: "rgb(78,78,78)",//38
        menuBorderColor: "rgb(102,102,102)",//100
        itemBgColor: "rgb(32,145,177)",
        itemBorderColor: "rgb(119,171,113)",
        itemMoveColor: "rgb(255,255,255)",
        itemColor: "rgb(255,255,255)",
        menuBarColor: "rgb(255,255,255)",
        menuContentColor: "rgb(255,255,255)"
    };
    this.colors[1] = {
        menuBgColor: "rgb(25,119,176)",
        menuBorderColor: "rgb(211,211,211)",
        itemBgColor: "rgb(121,201,236)",
        itemBorderColor: "rgb(68,141,174)",
        itemBgMoveColor: "rgb(110,172,44)",
        itemBorderMoveColor: "rgb(172,221,74)",
        itemMoveColor: "rgb(255,255,255)",
        itemColor: "rgb(255,255,255)",
        menuBarColor: "rgb(255,255,255)",
        menuContentColor: "#333333"
    };
    this.colors[3] = {
        menuBgColor: "rgb(159,153,138)",
        menuBorderColor: "rgb(142,132,107)",
        itemBgColor: "rgb(254,238,189)",
        itemBorderColor: "rgb(164,91,19)",
        itemBgMoveColor: "rgb(252,211,61)",
        itemBorderMoveColor: "rgb(164,91,19)",
        itemMoveColor: "rgb(76,48,0)",
        itemColor: "rgb(0,116,199)",
        menuBarColor: "rgb(76,48,0)",
        menuContentColor: "rgb(76,48,0)"
    };
    this.colors[4] = {
        menuBgColor: "#15B69A",
        menuBorderColor: "gray",
        itemBgColor: "#EAFFFA",
        itemBorderColor: "#15B69A",
        itemBgMoveColor: "rgb(13,133,96)",
        itemBorderMoveColor: "gray",
        itemMoveColor: "#FFFFFF",
        itemColor: "gray",
        menuBarColor: "#FFFFFF",
        menuContentColor: "gray"
    };
    this.font = {};
    this.menus = [];
    //<div class="title" name="title"><span class="titleText">' + barName + '</span></div><div>
}

/*
 * 添加方法
 * 首先查看this.menus[menuName]这个菜单（就是一个数组）是否存在。
 * 如果不存在，先创建这个菜单（数组）。
 * 使用menuItemName和url创建MenuItem对象，把MenuItem对象添加到菜单（数组）尾部。
 * frameName -- 指定在哪个帧中打开页面
 */
Q6MenuBar.prototype.add = function (menuName, menuItemName, url, frameName) {
    if (!this.menus[menuName]) {
        this.menus[menuName] = [];
    }
    var len = this.menus[menuName].length;
    this.menus[menuName][len] = new MenuItem(menuItemName, url, frameName);
    
    // MenuItem类
    function MenuItem(menuItemName, url, frameName) {
        this.menuItemName = menuItemName;
        this.url = url;
        this.frameName = frameName;
    }
}
/*
MenuBar的toString()方法
该方法会生成与MenuBar相关的HTML代码，然后遍历menus属性，生成每个菜单对应HTML代码。
*/
Q6MenuBar.prototype.toString = function () {
    // menuBar对应的<div>
    var str = '<div style="border:1px solid' + this.colors[this.colorStyle].menuBorderColor + ';color:' + this.colors[this.colorStyle].menuBarColor + ';" class = "menuBar" name="menuBar" onClick="' + this.obj + '.showMenu(event, this)">\n';
    // menuBar的标题<div>
    str += '<div style="background-color:' + this.colors[this.colorStyle].menuBgColor + ';" class="barTitle" name="barTitle"><span class="barTitleText">' + this.barName + '</span></div>\n';
    // 使用循环添加每个菜单对应的HTML代码。
    for (var menuName in this.menus) {
        str += this.menu2Str(menuName);
    }
    // menuBar尾部对应的<div>
    str += '<div style="background-color:' + this.colors[this.colorStyle].menuBgColor + ';" name="barBottom" class="barBottom">';
    str += '</div>';
    return str;
}

/*
 * 该方法首先生成与菜单对应的HTML代码。
 * menuName是菜单名字，可以使用menus[menuName]来获取一维数组。
 * 遍历一维数组，获取其中每个MenuItem，生成MenuItem对应的HTML代码。
 */
Q6MenuBar.prototype.menu2Str = function (menuName) {
    var icon = this.config.imgDir + this.icon.jiaIcon;
    // 菜单对应的<div>
    var str = '<div name="menu">\n';
    // 菜单标题对应的<div>，其中包含icon与text两部分。
    str += '<div style="background-color:' + this.colors[this.colorStyle].menuBgColor + ';border-right-color:' + this.colors[this.colorStyle].menuBorderColor + ';border-bottom-color:' + this.colors[this.colorStyle].menuBorderColor + ';" name="menuTitle" class="menuTitle"><span name="menuTitleIcon" class="menuTitleIcon"><img src="' + icon + '"/></span><span class="menuTitleText">' + menuName + '</span></div>\n';
    // 菜单内容对象的<div>，所有菜单荐都存放在这个<div>中。
    str += '<div style="color:' + this.colors[this.colorStyle].menuContentColor + ';" class="menuContent"  name="menuContent">\n';
    // 使用循环添加每个MenuItem对应的HTML
    for (var i = 0; i < this.menus[menuName].length; i++) {
        str += this.item2Str(this.menus[menuName][i]);
    }
    str += '</div>\n</div>\n';
    return str;
}

/*
 * menuItem是MenuItem类型的对象。
 * 该方法生成menuItem对应的HTML代码。
 */
Q6MenuBar.prototype.item2Str = function (menuItem) {
    return '<div style="border:1px solid ' + this.colors[this.colorStyle].itemBorderColor + ';background-color:' + this.colors[this.colorStyle].itemBgColor + '; color:' + this.colors[this.colorStyle].itemColor + ';" class="menuItem" onMouseMove="' + this.obj + '.itemMouseMove(this)" onMouseOut="' + this.obj + '.itemMouseOut(this)" onClick="skip(\'' + menuItem.url + '\', \'' + menuItem.frameName + '\')">' + menuItem.menuItemName + '</div>\n';
}

function skip(url, frameName) {
    if (parent[frameName]) {
        parent[frameName].location.href = url;
    } else {
        location.href = url;
    }
}


///////////////////////////


/*
	获取当前被点击的menu元素。
	只有点击：div menuTitle、img、menuTitleText，才获取父元素。
	如果父元素是menuContent，返回null。
*/
Q6MenuBar.prototype.getCurrMenu = function (res) {
    tagName = res.tagName;
    name = res.getAttribute("name");
    while (tagName != "DIV" || name != "menu") {
//		alert(tagName + ", " + name);
        res = res.parentNode;
        if (!res) {
            return null;
        }
        tagName = res.tagName;
        name = res.getAttribute("name");
        if (tagName == "DIV" && name == "menuContent") {
            return null;
        }
    }
    return res;
}

Q6MenuBar.prototype.attr = function (ele, attrName) {
    if (ele.getAttribute) {
        return ele.getAttribute(attrName);
    }
    return null;
}

Q6MenuBar.prototype.showMenu = function (evt, menuBar) {
    var e = evt ? evt : window.event;
    var res = e.srcElement || e.target;
    var menu = this.getCurrMenu(res);//获取当前被点击的menu
    if (!menu) return;
    this.openMenu(menuBar, menu);
}

// 打开或关闭menu
Q6MenuBar.prototype.openMenu = function (menuBar, menu) {
    var childs = menu.childNodes;//获取menuBar的所有子元素
    for (var i = 0; i < childs.length; i++) {
        //因为Firefor中，换行会出现空白节点，所以需要小心。
        //获取所有content元素
        if (this.attr(childs[i], "name") == 'menuContent') {
            var display = childs[i].style.display;
            if (!display || display == 'none') {
                if (this.config.radioButton) {
                    this.closeMenu(menuBar);//关闭所有menu
                }
                childs[i].style.display = 'block';//打开当前menu
                this.changeImg(menu, false);//更换当前menu图标
            } else {
                if (this.config.radioButton) {
                    this.closeMenu(menuBar);//关闭所有menu
                }
                childs[i].style.display = 'none';
                this.changeImg(menu, true);
            }
        }
    }
}

// 更换图片
Q6MenuBar.prototype.changeImg = function (menu, flag) {
    var img = menu.getElementsByTagName("img")[0];
    var jiaIcon = this.config.imgDir + this.icon.jiaIcon;
    var jianIcon = this.config.imgDir + this.icon.jianIcon;
    img.src = flag ? jiaIcon : jianIcon;
}

// 关闭所有menu
Q6MenuBar.prototype.closeMenu = function (menuBar) {
    var menus = menuBar.childNodes;
    //获取menuBar中所有menu
    for (var i = 0; i < menus.length; i++) {
        if (this.attr(menus[i], 'name') != 'menu') continue;
        var childs = menus[i].childNodes;
        //获取当前menu中所有content
        for (var j = 0; j < childs.length; j++) {
            if (this.attr(childs[j], 'name') != 'menuContent') continue;
            childs[j].style.display = 'none';
        }
        this.changeImg(menus[i], true);
    }
}

Q6MenuBar.prototype.itemMouseMove = function (e) {
    e.style.border = "1px solid " + this.colors[this.colorStyle].itemBorderMoveColor;
    e.style.backgroundColor = this.colors[this.colorStyle].itemBgMoveColor;
    e.style.color = this.colors[this.colorStyle].itemMoveColor;
    e.style.fontWeight = "bold";
}

Q6MenuBar.prototype.itemMouseOut = function (e) {
    e.style.border = "1px solid " + this.colors[this.colorStyle].itemBorderColor;
    e.style.backgroundColor = this.colors[this.colorStyle].itemBgColor;
    e.style.color = this.colors[this.colorStyle].itemColor;
    e.style.fontWeight = "";
}
